<template>
  <div class="app-container">
    <!-- 顶部导航栏 -->
    <el-header height="60px" class="top-header">
      <div class="header-content">
        <h1 class="system-title"><img src="./assets/logo.png"/>中燃文件管理系统</h1>
          <el-button 
          icon="Fold" 
          size="small" 
          class="toggle-btn"
          @click="toggleSidebar"
        />
      </div>
    </el-header>
    
    <el-container class="main-container">
      <!-- 侧边栏 - 添加宽度动态绑定 -->
      <el-aside 
        :width="isSidebarCollapse ? '60px' : '200px'" 
        class="sidebar"
        :class="{ 'collapsed': isSidebarCollapse }"
      >
        <MenuSidebar />
      </el-aside>
      
      <!-- 主内容区 -->
      <el-container direction="vertical">
        <!-- 顶部标签页 -->
        <el-header height="60px" class="tabs-header">
          <TabsView />
        </el-header>
        
        <!-- 内容区域 -->
        <el-main class="main-content">
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import MenuSidebar from './components/MenuSidebar.vue'
import TabsView from './components/TabsView.vue'
import { Menu } from '@element-plus/icons-vue'

// 侧边栏伸缩状态
const isSidebarCollapse = ref(false)

// 切换侧边栏伸缩状态
const toggleSidebar = () => {
  isSidebarCollapse.value = !isSidebarCollapse.value
}

// 提供给子组件使用的状态
const provide = {
  isSidebarCollapse
}
</script>

<style scoped lang="scss">
.app-container {
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.top-header {
  color: white;
  padding: 0 20px;
  z-index: 10;
  background: linear-gradient(90deg, #1371b9 70%, #c83633);
}

.header-content {
  display: flex;
  align-items: center;
  height: 100%;
}

.toggle-btn {
  
    background:none;
    color:#fff;
    border:0;
    outline:none;
    font-size:16px;
    margin:0 0 0 5%;
  
//   &:hover {
//     background-color: rgba(255, 255, 255, 0.2);
//   }
}

.system-title {
  font-size: 18px;
  margin: 0;
  font-weight: 500;
  display:flex;
  justify-content:center;
  align-items: center;
}
.system-title img{
    display: block;
    width: 30px !important;
    margin: 0 5px 0 0;
    cursor: pointer;
}
.main-container {
  flex: 1;
  display: flex;
  height: calc(100% - 60px);
}

.sidebar {
  background-color: #0f172a;
  color: white;
  border-right: 1px solid #e5e7eb;
  transition: width 0.3s ease;
  overflow:hidden;
}

.sidebar.collapsed {
  width: 60px !important;
}

.tabs-header {
  background-color: #fff;
  border-bottom: 1px solid #e5e7eb;
  padding: 0;
}

.main-content {
  padding: 20px;
  overflow-y: auto;
  background-color: #f8fafc;
}
</style>